import styles from './index.less';
import { useEffect, useState } from 'react';

export default function Select(props: any) {
  const { op, ac, onChange, widthName } = props;
  const [isShow, setIsShow] = useState<boolean>(false);
  const [newOp, setNewOp] = useState<any>({});
  useEffect(() => {
    if (ac.value) {
      setNewOp(ac);
    }
  }, [ac]);
  useEffect(() => {
    window.addEventListener('click', () => {
      if (isShow) {
        setIsShow(false);
      }
    });
  });
  return (
    <div
      className={styles.selectBox}
      style={{ width: widthName ? widthName : 134 }}
    >
      <div
        onClick={(e) => {
          e.stopPropagation();
          setIsShow(true);
        }}
        className={styles.selectValue}
      >
        <span>{newOp?.label}</span>
        <img src={require('@/assets/bottom.png')} alt="" />
      </div>
      {isShow ? (
        <div className={styles.opBox}>
          {op.map((item: any) => (
            <div
              onClick={() => {
                setIsShow(false);
                setNewOp(item);
                onChange(item);
              }}
              key={item.value}
              className={styles.opLi}
              style={{ color: item.value === newOp.value ? '#39FFFB' : '#fff' }}
            >
              {item.label}
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}
